// -----------------------------获取学员列表并渲染-----------------------------
async function renderStudent () {
    let { data: res } = await axios({
        method: 'get',
        url: '/students'
    })
    let arr = res.data.map(item => {
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id=${item.id} class="bi bi-trash"></i></a>
        </td>
      </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()



// -----------------------------动态模糊框(弹窗)-----------------------------
// let 变量 = new bootstrap.Model(模糊框盒子)
// 变量.show()  //显示
// 变量.hide() //隐藏


let modal = new bootstrap.Modal(document.querySelector('#modal'))


// -----------------------------点击 + 弹窗显示-----------------------------
document.querySelector('#openModal').addEventListener('click', function () {
    modal.show()  //显示
    document.querySelector('#modal h5.modal-title').innerHTML = '添加学员'  //修改弹窗标题
    document.querySelector('form').reset()  //重置表单
})


// -----------------------------省市级联动效果-----------------------------
// 找到下拉框
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')

// 获取省 并渲染
async function getProvince () {
    const { data: res } = await axios.get('/api/province')
    // console.log(res)
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')
}

// 获取市 并渲染
async function getCity () {
    // 无论切换到 各个省  --省份--  ，总是要重置县
    area.innerHTML = '<option value="">--地区--</option>'
    // 选择了空的省，重置城市
    if (province.value === '') {
        city.innerHTML = '<option value="">--城市--</option>'
        return
    }
    const { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
    // console.log(res)
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
}

// 获取县 并渲染
async function getArea () {
    // 城市为空 重置地区
    if (city.value === '') {
        area.innerHTML = '<option value="">--地区--</option>'
        return
    }
    const { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
    // console.log(res)
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
}

// 进入页面 立刻获取省
getProvince()
// 切换省的时候 获取对应的市 并渲染
province.addEventListener('change', getCity)
// 切换到市的时候，获取对应的县，并渲染
city.addEventListener('change', getArea)


// -----------------------------提交弹窗中的表单-----------------------------
document.querySelector('#submit').addEventListener('click', async function (e) {
    // 阻止默认行为
    e.preventDefault()
    // 获取表单数据
    let data = val(document.querySelector('#form'))
    // 把字符串类型的数字，转成真的数字(Number)
    data.age = Number(data.age)
    data.gender = +data.gender // + 和变量连在一起
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // console.log(data)
    // Ajax提交，判断一下，提交还是添加
    let title = document.querySelector('#modal h5.modal-title')
    if (title.innerHTML === '添加学员') {
        const { data: res } = await axios.post('/students', data)
        // console.log(res)
        alert(res.message) // 提示
    } else {
        // 修改学员
        let id = title.dataset.id
        const { data: res } = await axios.put(`/students/${id}`, data)
        alert(res.message) // 提示
    }

    modal.hide() // 关闭弹出层
    renderStudent() // 重新获取全部学员
})


// -----------------------------点击修改和删除-----------------------------
// 删除和修改为动态创建  添加事件要利用事件委托
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 判断，符合条件（点击的元素包含 bi-trash 这个类名），说明点击的是删除
    if (e.target.classList.contains('bi-trash')) {
        if (!confirm('确定要删除吗？')) return
        // console.log('点了删除')
        let id = e.target.dataset.id
        // console.log(id)
        // 发送请求删除（接口没有响应结果，所以不用接收响应结果了）
        await axios({
            method: 'DELETE',
            // url: '/students/:id'
            url: `/students/${id}`
        })
        alert('删除成功') // 提示
        renderStudent() // 刷新重新渲染列表
    }

    // 判断，符合条件（点击的元素包含 bi-pen 这个类名），说明点击的是修改
    if (e.target.classList.contains('bi-pen')) {
        console.log('点击了修改')
        // 点击了修改，要做数据回填，做数据回填，前提是有数据才行
        let id = e.target.dataset.id
        // console.log(id)
        const { data: res } = await axios.get(`/students/${id}`)
        console.log(res)
        // 让弹窗显示
        modal.show()
        // 修改弹窗的标题
        let title = document.querySelector('#modal h5.modal-title')
        title.innerHTML = '修改学员' // 修改弹窗的标题
        title.setAttribute('data-id', id)
        // 获取城市、县
        province.value = res.data.province
        await getCity()
        city.value = res.data.city
        await getArea()
        // 使用插件做数据回填
        // val(表单, 数据)
        val(document.querySelector('#form'), res.data)
    }
})